<template>
  <div class="appa2">
    <span class="top">{{ title }}</span>
    <div class="tent">
      <span class="span1">用户登录</span>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" autocomplete="on" label-position="left">
        <el-form-item prop="username">
          <el-input ref="username" v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="User" name="username" type="text" tabindex="1" autocomplete="on" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input ref="password" v-model="loginForm.password" :type="passwordType" placeholder="请输入密码"
                    prefix-icon="Lock" tabindex="2" @keyup="checkCapslock" @blur="capsTooltip = false" @keyup.enter="handleLogin">
            <template #suffix>
              <el-icon v-if="passwordType === 'password'" class="el-input__icon" @click="showPwd"><View /></el-icon>
              <el-icon v-else class="el-input__icon" @click="showPwd"><Hide /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="errorTime >= 3" prop="identify">
          <el-row>
            <el-col :span="18">
              <el-input ref="identify" v-model="loginForm.identify" prefix-icon="Postcard" placeholder="请输入验证码" tabindex="3" />
            </el-col>
            <el-col :span="6">
              <identify ref="identifyRef" :identify-code="identifyCode" :content-width="70" @click="makeCode" />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px" @click="handleLogin">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Identify from '@/components/Identify/identify.vue'

export default {
  name: 'Login',
  components: { Identify },
  data () {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能小于6位'))
      } else {
        callback()
      }
    }
    const validateIdentify = (rule, value, callback) => {
      if (this.isNull(this.identifyCode) && value.toLowerCase() !== this.identifyCode.toLowerCase()) {
        this.makeCode()
        callback(new Error('验证码错误'))
      } else {
        callback()
      }
    }
    return {
      title: '城市大数据管理平台',
      identifyCode: undefined,
      isLogin: false,
      errorTime: 4,
      loginForm: {
        username: process.env.NODE_ENV === 'development' ? 'admin' : undefined,
        password: process.env.NODE_ENV === 'development' ? '123456' : undefined,
        identify: undefined
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur' }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        identify: [{ required: true, trigger: 'blur', validator: validateIdentify }]
      },
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      otherQuery: {}
    }
  },

  mounted () {
    if (this.loginForm.username === '') {
      this.$refs.username.focus()
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus()
    }
    this.makeCode()
  },
  methods: {
    makeCode () {
      this.identifyCode = this.$refs.identifyRef.makeCode(4)
    },
    checkCapslock ({ shiftKey, key } = {}) {
      if (key && key.length === 1) {
        if ((shiftKey && key >= 'a' && key <= 'z') || (!shiftKey && key >= 'A' && key <= 'Z')) {
          this.capsTooltip = true
        } else {
          this.capsTooltip = false
        }
      }
      if (key === 'CapsLock' && this.capsTooltip === true) {
        this.capsTooltip = false
      }
    },
    showPwd () {
      if (this.passwordType === 'password') {
        this.passwordType = 'text'
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin () {
      this.$router.push('/meeting')

      /*
            this.$refs.loginForm.validate((valid) => {
              if (valid) {
                this.loading = true
                this.$store
                  .dispatch('user/login', this.loginForm)
                  .then((res) => {
                    this.loading = false
                    if (this.$store.userStore.userInfo.id === undefined) {
                      this.errorTime++
                      this.makeCode()
                      this.$message.error(res.data.msg)
                      return
                    }
                    this.$router.push('/meeting')
                  })
                  .catch(() => {
                    this.loading = false
                  })
              } else {
                console.log('error submit!!')
                return false
              }
            })
      */
    }
  }
}
</script>

<style lang="scss" scoped>
.appa2 {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/img/login/dd.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  .top {
      color:#fff;
      position: absolute;
      top:100px;
      left:150px;
      font-size: 30px;
  }
  .tent {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 60%;
    top: 50%;
    transform: translateY(-50%);
    background-image: url('@/assets/img/login/zu.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 50px 50px;
    text-align: center;
    .span1 {
       color:#fff;
       font-size: 26px;
    }
    .el-button--primary {
        width: 100%;
    }
    .content {
        .right {
            float:right;
            color:#049add;
        }
        .left {
            float:left;
            color:#fff;
        }
    }
  }
}
</style>
